<template>
    <div class="goodslist">
        <Header title='JD商城 ~ 分类页'>
            <template #left>
            <van-icon name="arrow-left" @click="tobackFn"/>
        </template>
        </Header>
        <div class="lieBiaoBox">

            <div class="left">
                <!-- 下拉效果 -->
                <van-pull-refresh style="min-height: 100vh;" v-model="loading" :head-height="100" :pull-distance=100
                    :pulling-text="'.'" :loosing-text='"."' :loading-text="'.'" :success-duration="3"
                    @refresh="onRefresh">
                    <!-- 点击切换效果 -->
                    <van-sidebar v-model="active" @change="ChangeHeadel">
                        <van-sidebar-item v-for="item in leftCateList" :title="item" />

                    </van-sidebar>

                </van-pull-refresh>
            </div>
            <div class="right">
                <div class="item" v-for="item in goodsList">
                    <p class="title">{{ item.brand }}</p>
                    <ul class="ulBox">
                        <li class="smBox" v-for="t in item.list">
                            <img :src="t.img1" alt="">
                            <!-- <span>{{t.category}}</span> -->
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Header from '@/views/Header/header.vue'
import { ref, onMounted } from 'vue';
import { CategorylistApi, CategorybrandlistApi, categortBrandGoodsListApi } from '@/api/goods'
import { Toast } from 'vant';
import type { MyCateBrandGoodsItem } from '@/config/interface'
import {useRouter , type Router} from 'vue-router'
import router from '@/router';
const $router:Router = useRouter()

const loading = ref(false);
const count = ref(0);
const active = ref(0);
const onRefresh = () => {
    setTimeout(() => {
        loading.value = false;
    }, 100);
}
//返回上一级
const tobackFn = ()=>{
    router.go(-1)
}
// 先准备一个左侧渲染的数组
const leftCateList = ref<string[]>([])

// 准备一个右侧内容渲染的数组
const goodsList = ref<MyCateBrandGoodsItem[]>([])
//挂载完毕之后，上来就要加载的数据
onMounted(async () => {
    const res = await CategorylistApi()
    leftCateList.value = res.data
    //在渲染完毕之后加载第一个类别
    getGoodsList(res.data[0])

})

//因为点击切换的时候才会执行，所以把执行代码封装，开始就执行
const getGoodsList = async (cat: string) => {
    console.log(`根据${cat}去展示右边`);
    const brandList = await CategorybrandlistApi(cat)   //把当前的分类商品类别带过去  , 获取到了上面对应品牌列表
    // console.log(brandList, '1231231231');

    //接下来的思路 , 因为发送的是（利用promise.all把所有的商品类别的数据放到一个数组内发送） 
    //根据左面侧边栏获取上面品牌的数据，根据侧边栏+品牌获取下面商品列表的内容
    const list: any = []
    brandList.data.forEach((ele: any) => {
        list.push(categortBrandGoodsListApi({ category: cat, brand: ele.brand }))

    });
    const goods = await Promise.all(list)
    // console.log(goods, 123);

    // 3. 组装数据
    const res: MyCateBrandGoodsItem[] = []
    brandList.data.forEach((item: { brand: string }, index: number) => {
        res.push({
            cat,
            brand: item.brand,
            list: goods[index].data
        })
    })
    goodsList.value = res
    console.log(res)


}



//点击切换时候促发的的事件
const ChangeHeadel = async (index: number) => {


    // // 获取的是左面侧边栏点击的商品内容
    const cat = leftCateList.value[index]
    getGoodsList(cat)
    // console.log('切换了 , 当前 内容 为' + cat);

    // const brandList = await CategorybrandlistApi(cat)   //把当前的分类商品类别带过去  , 获取到了上面对应品牌列表
    // // console.log(brandList, '1231231231');


    // //接下来的思路 , 因为发送的是（利用promise.all把所有的商品类别的数据放到一个数组内发送） 
    // //根据左面侧边栏获取上面品牌的数据，根据侧边栏+品牌获取下面商品列表的内容
    // const list: any = []
    // brandList.data.forEach((ele: any) => {
    //     list.push(categortBrandGoodsListApi({ category: cat, brand: ele.brand }))

    // });
    // const res = await Promise.all(list)
    // console.log(res, 123);

}





</script>
<style scoped lang="scss">
.lieBiaoBox {
    width: 100%;
    height: 100%;
    // padding: 0 10px;
    display: flex;

    >.left {
        height: 100%;
        overflow: hidden;

        >.van-pull-refresh {
            height: 100%;
            overflow-y: scroll; //设置滚动条
        }

        .van-sidebar-item {
            width: 85px;
            height: 46px;
            text-align: center;

        }
    }

.item{
     margin-bottom: 30px;
}

    >.right {
        width: calc(100% - 85px);
        .smBox{
            width: 100%;
            height: 100px;
           
            >img{
                width: 40%;
                display: block;
            }

        }
    }

}
</style>